import React, { useState, useEffect, useRef } from 'react';
import "../../../scss/fan/slider.scss" // 确保导入外部样式表
import { Notify} from 'react-vant';
const PuzzleSlider = (porps) => {
    const sliderRef = useRef(null);
    const sliderContainerRef = useRef(null);
    const gapRef = useRef(null);
    const messageRef = useRef(null);
    const dragHandleRef = useRef(null);
    const [isVerified, setIsVerified] = useState(false);

    useEffect(() => {
        const slider = sliderRef.current;
        const sliderContainer = sliderContainerRef.current;
        const gap = gapRef.current;
        const message = messageRef.current;
        const dragHandle = dragHandleRef.current;

        const handleMouseDown = (event) => {
            event.preventDefault();
            startDrag(event.clientX);
        };

        const handleTouchStart = (event) => {
            event.preventDefault();
            startDrag(event.touches[0].clientX);
        };

        const startDrag = (startX) => {
            startX -= dragHandle.offsetLeft;

            const handleMove = (moveX) => {
                moveX -= startX;
                const maxX = sliderContainer.offsetWidth - dragHandle.offsetWidth;

                if (moveX < 0) {
                    dragHandle.style.left = '0px';
                    slider.style.left = '0px';
                } else if (moveX > maxX) {
                    dragHandle.style.left = maxX + 'px';
                    slider.style.left = maxX + 'px';
                } else {
                    dragHandle.style.left = moveX + 'px';
                    slider.style.left = moveX + 'px';
                }
            };

            const handleMouseMove = (event) => {
                handleMove(event.clientX);
            };

            const handleTouchMove = (event) => {
                handleMove(event.touches[0].clientX);
            };

            const handleEnd = () => {
                document.removeEventListener('mousemove', handleMouseMove);
                document.removeEventListener('touchmove', handleTouchMove);
               
                const sliderLeft = slider.offsetLeft;
                const gapLeft = gap.offsetLeft;
                if (Math.abs(sliderLeft - gapLeft) < 5) {
                    setIsVerified(true);
                    slider.style.backgroundColor = '#0f0';
                    // message.textContent = '验证通过';
                   
                    porps.onshow()
                    porps.onlogin()
                    document.removeEventListener('mouseup', handleEnd);
                    document.removeEventListener('touchend', handleEnd);
                } else {
                    slider.style.left = '0px';
                    dragHandle.style.left = '0px';
                    // message.textContent = '验证失败，请重试';
                    Notify.show({ type: 'danger', message: '验证失败' })
                    document.removeEventListener('mouseup', handleEnd);
                    document.removeEventListener('touchend', handleEnd);
                }
            };

            document.addEventListener('mousemove', handleMouseMove);
            document.addEventListener('touchmove', handleTouchMove);
            document.addEventListener('mouseup', handleEnd);
            document.addEventListener('touchend', handleEnd);
        };

        dragHandle.addEventListener('mousedown', handleMouseDown);
        dragHandle.addEventListener('touchstart', handleTouchStart);

        return () => {
            dragHandle.removeEventListener('mousedown', handleMouseDown);
            dragHandle.removeEventListener('touchstart', handleTouchStart);
        };
    }, []);

    return (
        <div className="puzzle-slider">
            <div ref={sliderContainerRef} className="slider-container">
                <div ref={gapRef} className="gap"></div>
                <div ref={sliderRef} className="slider"></div>
            </div>
            <div className="drag-bar">
                <div ref={dragHandleRef} className="drag-handle"></div>
                <div ref={messageRef} className="message">右滑通过验证</div>
            </div>
            
        </div>
    );
};

export default PuzzleSlider;